import React from 'react';
import { Typography } from 'antd';
import { InbizIcon, getEditor } from '@inbiz/utils';
import { TextWidget } from '@inbiz/react';

const { Title } = Typography;
const prefixCls = 'inbiz-BizHeader';

const DetailHeader: React.FC<any> = (props) => {
  const {
    title = {
      value: '',
      status: false,
    },
    extra,
  } = props;

  const isEditor = getEditor();

  //返回
  const goBack = () => {
    history.back();
  };

  return !title.status ? null : (
    <div
      className="detail-header"
      style={{
        fontSize: 18,
        height: 44,
        color: 'var(--inbiz-color-heading)',
        display: 'flex',
        alignItems: 'center',
        background: 'white',
      }}
    >
      <div
        className="tite-header"
        style={{ position: isEditor ? 'absolute' : 'fixed' }}
      >
        <span>
          <InbizIcon type="icon-ic-arrow-left-bold" onClick={goBack} />
        </span>
        <Title ellipsis={{ tooltip: true }} className={`${prefixCls}-title`}>
          <span>
            <TextWidget>{title.value}</TextWidget>
          </span>
        </Title>
      </div>
      {extra}
    </div>
  );
};

export default DetailHeader;
